// 书架
.bookshelf {
  // 书架上方
  .shelf-top {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    background-color: #fff;
    // padding: 0 40rpx;
    border-bottom: 1px solid #eee;
    z-index: 5;
    .shelf-left {
      margin-left: 40rpx;
    }
    .shelf-right {
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 36rpx;
      }
      .search-btn {
        margin: 0 40rpx;
      }
      .record-btn {
        font-size: 30rpx;
      }
    }
  }
  // 书架下方
  .shelf-bottom {
    margin-top: 60rpx;
    padding: 40rpx;
    font-size: 28rpx;
    color: #6c6f74;
    // 编辑
    .edit {
      display: flex;
      justify-content: space-between;
      .edit-btn {
        color: #333;
      }
    }
    // 书架内容
    .shelf-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // 每一本书
      .shelf-item {
        width: 28%;
        font-size: 26rpx;
        margin-top: 40rpx;
        // background-color: pink;
        .cover {
          position: relative;
          width: 100%;
          height: 230rpx;
          box-shadow: 0px 1px 5px 1px rgba($color: #000000, $alpha: 0.2);
          .image {
            width: 100%;
            height: 100%;
          }
          // 删除遮罩层
          .mark {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #fff, $alpha: 0.4);
            .delBtn {
              float: right;
              margin: 6rpx;
              width: 30rpx;
              line-height: 30rpx;
              color: #fff;
              font-size: 20rpx;
              text-align: center;
              border-radius: 50%;
              border: 1px solid #fff;
              background-color: #fc474e;
            }
          }
        }
        .title {
          margin: 10rpx 0;
          color: #2f3238;
        }
        .author {
          color: #93969b;
          font-size: 24rpx;
        }
        
      }
    }
    // 书架空状态
    .emtry-shelf {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding-top: 100rpx;
      .emtry-cover {
        width: 250rpx;
        height: 300rpx;
        // background-color: pink;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        color: #d5d5d5;
        font-size: 26rpx;
        margin: 30rpx 0;
      }
      .select-book {
        width: 180rpx;
        line-height: 60rpx;
        color: #fff;
        font-size: 26rpx;
        text-align: center;
        border-radius: 30rpx;
        background-color: #476fde;
      }
    }
  }
}